<template>
  <div class="detail" :style="{height: height}">
    <Navbar title="新闻详情"></Navbar>

    <div class="item">
      <p>{{ news.title }}</p>
      <div>
        <span>{{ news.like }}赞</span>
        <span>{{ news.fav }}收藏</span>
        <span>{{ news.view }}浏览</span>
        <span>时间:{{ news.create_time | timeFormat('YYYY-MM-DD') }}</span>
      </div>
    </div>
    <div class="divider"></div>
    <!-- 使用v-html渲染有HTML标签的文本 -->
    <div class="content" v-html="news.content"></div>
  </div>
</template>

<script>
export default {
  name: "NewsDetails",
  data() {
    return {
      news: {},
      height: document.documentElement.clientHeight - 95 + "px"
    };
  },
  methods: {
    getNewsDetail() {
      // 获取路由上的参数
      let nid = this.$route.query.id;
      this.$http
        .get(`/news/${nid}`)
        .then(res => {
          this.news = res.data.news;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.getNewsDetail();
  }
};
</script>

<style lang="less" scoped>
.detail {
  margin-top: 40px;
  padding-bottom: 20px;
  overflow: hidden;
  overflow-y: auto;
}
.item p {
  color: #66ccff;
  font-size: 24px;
  font-weight: 600;
}
.item span {
  margin-right: 20px;
  color: #999999;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: #b3b3b3;
  margin: 5px 0;
}
.content {
  padding: 3px;
}
</style>
